<template>
  <div class="data-statistics c6-container" style="overflow-y: auto">
    <div>
      <!--搜索框-->
      <div slot="searchform" class="form-top">
        <p class="form-top-p">
          <el-radio-group v-model="listQuery.yearQuarter" size="mini" @change="yearQuarterChange">
            <el-radio-button
              v-for="(item, index) in filterData.yearQuarterList"
              :key="index"
              :label="item.value">{{ item.label }}</el-radio-button>
          </el-radio-group>
        </p>
        <p class="form-top-p">
          <el-select v-model="listQuery.unitDeptCode" clearable placeholder="请选择单位">
            <el-option
              v-for="item in filterData.deptOption"
              :key="item.deptNo"
              :label="item.deptName"
              :value="item.deptNo" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-select v-model="listQuery.cType" clearable placeholder="请选择6c类型">
            <el-option
              v-for="item in filterData.cTypeOption"
              :key="item.itemValue"
              :label="item.itemName"
              :value="item.itemValue" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-date-picker
            v-model="listQuery.year"
            placeholder="选择年份"
            format="yyyy"
            :clearable="false"
            value-format="yyyy"
            type="year"
            style="width: 170px"
            class="filter-item"
            size="mini" />
        </p>
        <p v-show="listQuery.yearQuarter===1" class="form-top-p">
          <el-select v-model="listQuery.quarter" collapse-tags placeholder="季度">
            <el-option
              v-for="item in filterData.quarterOption"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetListQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="exportListFile">导出</el-button>
        </p>
      </div>
      <!--表格-->
      <div class="table_content">
        <div class="table_title">
          <img src="@/assets/images/userInspetionTitle.png" alt>
          {{ listQuery.cType }}检测计划执行情况统计
        </div>
        <div style="">
          <!--表格年份-->
          <el-table v-if="!quarterShow" v-loading="loading" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column key="1" prop="name" label="单位/线路" width="180" align="center" />
            <el-table-column key="2" label="1季度" align="center">
              <el-table-column prop="oneQuarterPlan" label="计划次数" align="center">
                <template slot-scope="scope">
                  <a
                    size="mini"
                    style="text-decoration: underline; cursor: pointer"
                    @click="quarterPlan1Detail(scope.row)">{{ scope.row.oneQuarterPlan }}</a>
                </template>
              </el-table-column>
              <el-table-column prop="oneQuarterComplete" label="完成次数" align="center" />
              <el-table-column prop="oneQuarterRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column key="3" label="2季度" align="center">
              <el-table-column prop="twoQuarterPlan" label="计划次数" align="center" />
              <el-table-column prop="twoQuarterComplete" label="完成次数" align="center" />
              <el-table-column prop="twoQuarterRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column key="4" label="3季度" align="center">
              <el-table-column prop="threeQuarterPlan" label="计划次数" align="center" />
              <el-table-column prop="threeQuarterComplete" label="完成次数" align="center" />
              <el-table-column prop="threeQuarterRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column key="5" label="4季度" align="center">
              <el-table-column prop="fourQuarterPlan" label="计划次数" align="center" />
              <el-table-column prop="fourQuarterComplete" label="完成次数" align="center" />
              <el-table-column prop="fourQuarterRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column key="6" prop="totalRate" label="完成率总计" align="center" />
          </el-table>
          <!--表格季度-->
          <el-table v-if="quarterShow" v-loading="loading" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column key="1" prop="name" label="单位/线路" width="180" align="center" />
            <el-table-column
              :label="monthList.month1"
              align="center">
              <el-table-column prop="oneMonthPlan" label="计划次数" align="center" />
              <el-table-column prop="oneMonthComplete" label="完成次数" align="center" />
              <el-table-column prop="oneMonthRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column
              :label="monthList.month2"
              align="center">
              <el-table-column prop="twoMonthPlan" label="计划次数" align="center" />
              <el-table-column prop="twoMonthComplete" label="完成次数" align="center" />
              <el-table-column prop="oneMonthRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column
              :label="monthList.month3"
              align="center">
              <el-table-column prop="threeMonthPlan" label="计划次数" align="center" />
              <el-table-column prop="threeMonthComplete" label="完成次数" align="center" />
              <el-table-column prop="threeMonthRate" label="完成率" align="center" />
            </el-table-column>
            <el-table-column key="5" prop="completeRate" label="完成率总计" align="center" />
          </el-table>
        </div>
      </div>

      <!--图片-->
      <div v-for="(item, index) in tableData" :key="index" class="chat">
        <div class="title1">
          <img src="@/assets/images/userInspetionCharts.png" alt>
          {{ listQuery.cType }}{{ item.name }}完成率统计
        </div>
        <div :id="'main' + index" class="col-div" style="width: 100%; height: calc(100% - 50px)" />
      </div>
    </div>
    <PlanExecutionStatisticsDetail
      v-if="PlanExecutionStatisticsDetailVisible"
      ref="PlanExecutionStatisticsDetail"
      :rail-type="this.listQuery.railType"
      :c-type="this.listQuery.cType"
      :unit-dept-code="this.listQuery.unitDeptCode"
      :year="this.listQuery.year" />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { downloadFile } from '@/utils/public'
import { getToken } from '@/utils/auth'
import { planExecuteStatistic, exportList } from '@/api/cms/Inspection-management/Inspection-plan-management/DetailedPlanManagement'
import PlanExecutionStatisticsDetail from './components/PlanExecutionStatisticsDetail'
import { findManageUnitDeptList, getRailtypeList } from '@/api/platform'
import echarts from 'echarts'
import { getListByTypeCode } from '@/api/cms/basic'
import ContentForm from '@/components/ContentForm'
export default {
  name: 'PlanExecutionStatistics',
  components: {
    PlanExecutionStatisticsDetail
  },
  data() {
    return {
      quarterShow: false,
      filterData: {
        deptOption: [],
        railtypeOption: [],
        cTypeOption: [],
        quarterOption: [
          { label: '1季度', value: 1 },
          { label: '2季度', value: 2 },
          { label: '3季度', value: 3 },
          { label: '4季度', value: 4 }
        ],
        yearQuarterList: [
          { label: '年份', value: 0 },
          { label: '季度', value: 1 }
        ]
      },
      showSummary: true,
      tableData: [],
      loading: true,
      total: 0,
      listQuery: {
        unitDeptCode: '',
        cType: '1C',
        railType: '',
        yearQuarter: 0,
        quarter: 1,
        year: new Date().getFullYear().toString(),
        page: 1,
        size: 20
      },
      PlanExecutionStatisticsDetailVisible: false,
      monthList: {
        month1: '1月',
        month2: '2月',
        month3: '3月'
      }
    }
  },
  mounted() {
    this.initPage()
    this.getList()
    this.initChart()
  },
  methods: {
    yearQuarterChange() {
      if (this.listQuery.yearQuarter === 1) {
        this.quarterShow = true
      } else {
        this.quarterShow = false
      }
      this.getList()
    },
    initPage() {
      // 获取单位 deptList
      findManageUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        this.filterData.deptOption = Object.freeze(resData)
      })
      // 获取铁路类型
      getRailtypeList().then(response => {
        this.filterData.railtypeOption = Object.freeze(response.data)
      })
      // 获取c类型
      getListByTypeCode({ typeCode: 'JCJCTYPE' }).then((response) => {
        this.filterData.cTypeOption = Object.freeze(response.data)
      })
    },
    // 获取表格数据
    async  getList() {
      this.loading = true
      if (this.quarterShow) {
        this.changQuarter(this.listQuery.quarter)
      }
      this.tableData = []
      await planExecuteStatistic(this.listQuery).then(res => {
        this.tableData = Object.freeze(res.data)
        this.loading = false
      })
      this.initChart()
    },
    // 重置
    resetListQuery() {
      this.listQuery = {
        unitDeptCode: '',
        cType: '1C',
        railType: '',
        yearQuarter: 0,
        quarter: 1,
        year: new Date().getFullYear().toString(),
        page: 1,
        size: 20
      }
      this.getList()
    },
    changQuarter(month) {
      this.monthList.month1 = month * 3 - 2 + '月'
      this.monthList.month2 = month * 3 - 1 + '月'
      this.monthList.month3 = month * 3 + '月'
    },

    quarterPlan1Detail(row) {
      this.PlanExecutionStatisticsDetailVisible = true
      this.$nextTick(() => {
        this.$refs.PlanExecutionStatisticsDetail.initPage(row)
      })
    },

    initChart() {
      if (this.listQuery.yearQuarter === 0) {
        this.tableData.forEach((item, index) => {
          const myChart = echarts.init(document.getElementById(`main${index}`))
          const xData = []
          const compCount1Arr = []
          const compCount2Arr = []
          const compCount3Arr = []
          const compCount4Arr = []
          this.tableData[index].children.forEach(item2 => {
            xData.push(item2.name)
            compCount1Arr.push(item2.oneQuarterRate.replace('%', ''))
            compCount2Arr.push(item2.twoQuarterRate.replace('%', ''))
            compCount3Arr.push(item2.threeQuarterRate.replace('%', ''))
            compCount4Arr.push(item2.fourQuarterRate.replace('%', ''))
          })
          const option = {
            xAxis: {
              type: 'category',
              data: xData,
              splitLine: {
                // 分割线配置
                show: false,
                lineStyle: {
                  color: '#CFE0EF'
                }
              },
              axisLabel: {
                // y轴文字的配置
                textStyle: {
                  color: '#606266',
                  margin: 15
                }
                // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
              },
              axisTick: {
                show: false
              },
              axisLine: {
                // y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                  color: '#CFE0EF',
                  width: 1,
                  type: 'solid'
                }
              }
            },
            tooltip: {},
            legend: {
              data: ['1季度', '2季度', '3季度', '4季度'],
              right: '40',
              icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

              itemWidth: 10, // 设置宽度

              itemHeight: 10, // 设置高度

              itemGap: 20 // 设置间距
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              },
              show: true,
              axisLine: {
                show: false // 不显示坐标轴轴线
              },
              axisTick: {
                show: false // 不显示坐标轴刻度
              }
            },
            series: [
              {
                data: compCount1Arr,
                type: 'bar',
                name: '1季度',
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#45EDBB' // 0% 处的颜色
                        },
                        {
                          offset: 0.6,
                          color: '#45EDBB' // 60% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#45EDBB' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: compCount2Arr,
                name: '2季度',
                barWidth: 8, // 柱图宽度
                type: 'bar',
                barGap: 1, // 关键属性
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#58F0E7' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#31BFFF' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: compCount3Arr,
                type: 'bar',
                name: '3季度',
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#F4D873' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FFA031' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: compCount4Arr,
                type: 'bar',
                name: '4季度',
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#9DE8FF' // 0% 处的颜色
                        },

                        {
                          offset: 1,
                          color: '#738FF4' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              }
            ]
          }
          myChart.clear()
          myChart.setOption(option)
        })
      } else {
        this.tableData.forEach((item, index) => {
          const myChart = echarts.init(document.getElementById(`main${index}`))
          const xData = []
          const month1RateList = []
          const month2RateList = []
          const month3RateList = []
          this.tableData[index].children.forEach(item2 => {
            xData.push(item2.name)
            month1RateList.push(item2.oneMonthRate.replace('%', ''))
            month2RateList.push(item2.twoMonthRate.replace('%', ''))
            month3RateList.push(item2.threeMonthRate.replace('%', ''))
          })
          const option = {
            xAxis: {
              type: 'category',
              data: xData,
              splitLine: {
                // 分割线配置
                show: false,
                lineStyle: {
                  color: '#CFE0EF'
                }
              },
              axisLabel: {
                // y轴文字的配置
                textStyle: {
                  color: '#606266',
                  margin: 15
                }
                // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
              },
              axisTick: {
                show: false
              },
              axisLine: {
                // y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                  color: '#CFE0EF',
                  width: 1,
                  type: 'solid'
                }
              }
            },
            tooltip: {},
            legend: {
              data: [this.month1, this.month2, this.month3],
              right: '40',
              icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

              itemWidth: 10, // 设置宽度

              itemHeight: 10, // 设置高度

              itemGap: 20 // 设置间距
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              },
              show: true,
              axisLine: {
                show: false // 不显示坐标轴轴线
              },
              axisTick: {
                show: false // 不显示坐标轴刻度
              }
            },
            series: [
              {
                data: month1RateList,
                type: 'bar',
                name: this.month1,
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#45EDBB' // 0% 处的颜色
                        },
                        {
                          offset: 0.6,
                          color: '#45EDBB' // 60% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#45EDBB' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: month2RateList,
                name: this.month2,
                barWidth: 8, // 柱图宽度
                type: 'bar',
                barGap: 1, // 关键属性
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#58F0E7' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#31BFFF' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: month3RateList,
                type: 'bar',
                name: this.month3,
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#F4D873' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FFA031' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              }
            ]
          }
          myChart.clear()
          myChart.setOption(option)
        })
      }
    },
    exportListFile() {
      var url = process.env.VUE_APP_BASE_API + '/cms/planDetail/exportPlanExecuteList?1=1'
      if (this.listQuery.unitDeptCode) {
        url += '&unitDeptCode=' + this.listQuery.unitDeptCode
      }
      if (this.listQuery.cType) {
        url += '&cType=' + this.listQuery.cType
      }
      if (this.listQuery.railType) {
        url += '&railType=' + this.listQuery.railType
      }
      if (this.listQuery.yearQuarter !== '') {
        url += '&yearQuarter=' + this.listQuery.yearQuarter
      }
      if (this.listQuery.quarter) {
        url += '&quarter=' + this.listQuery.quarter
      }
      if (this.listQuery.year) {
        url += '&year=' + this.listQuery.year
      }
      url += '&access_token=' + getToken()
      var fileName = '计划执行情况统计.xls'
      window.location.href = url
      // window.open(url, fileName)
      // downloadFile({ url, fileName })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-table__body-wrapper {
  height: auto !important;
}
.chat {
  height: 350px;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
  border-radius: 6px;
  margin-bottom: 20px;
}
.chat .title1 {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  color: #0f2e68;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-statistics {
  background-color: #f1f4fb;
}
.table_title {
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 70px;
  /* identical to box height */
  height: 70px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f2e68;
}
.dialog-table {
  position: relative;
  width: 420px;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ebeef5;
  box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s linear;
  background: #409eff;
  color: white;
  z-index: 10;
  .dialog-title {
    display: flex;
    align-items: center;
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding: 0 10px 0 14px;
    i {
      flex: 1;
      font-size: 22px;
      text-align: right;
      cursor: pointer;
    }
  }
}

.dialogtan {
  width: 0;
  transition: all 0.4s linear;
}

.col-div {
  width: 100%;
  height: calc(100% - 42px);
  padding: 0 8px;
}

::v-deep .el-table_1_column_2 div {
  width: initial !important;
}
</style>
